<template>
	<div class="index">
		<el-row>
			<el-col class="index-head" :span="24">
				<div class="index-head-left">综合查询</div>
				<span class="select-endDate"><i class="iconfont icon-dengpao"></i>统计数据为本月数据，数据截止时间：{{$moment().format("YYYY-MM-DD")}}</span>
			</el-col>
			<el-col class="select-content" :span="24">
				<el-tabs v-model="activeName" class="select-cont">
					<!-- 条件查询 -->
					<el-tab-pane name="first" class="select-item">
						<span slot="label" class="select-item-title">条件查询</span>
						<el-col :span="24">
							<el-tabs v-model="activeName2" class="selectC-cont">
								<!-- 报名费 -->
								<el-tab-pane label="学员报名" name="first">
									<queryBMF></queryBMF>
								</el-tab-pane>
								<!-- 加油费 -->
								<el-tab-pane label="加油加气" name="second">
									<queryJYF></queryJYF>
								</el-tab-pane>
								<!-- 维修费 -->
								<el-tab-pane label="维护维修" name="third">
									<queryWXBY></queryWXBY>
								</el-tab-pane>
								<!-- 保险费 -->
								<el-tab-pane label="车辆保险" name="fifth">
									<queryCLBX></queryCLBX>
								</el-tab-pane>
								<!-- 检车费 -->
								<el-tab-pane label="车辆检车" name="sixth">
									<queryCLJC></queryCLJC>
								</el-tab-pane>
								<!-- 加时费 -->
								<el-tab-pane label="加时练车" name="seventh">
									<queryJSF></queryJSF>
								</el-tab-pane>
								<!-- 包库费 -->
								<el-tab-pane label="包库缴费" name="eighth">
									<queryBKF></queryBKF>
								</el-tab-pane>
								<!-- 报销费 -->
								<el-tab-pane label="报销费用" name="nineth">
									<queryFYBX></queryFYBX>
								</el-tab-pane>
								<!-- 考试模拟费 -->
								<el-tab-pane label="考试模拟" name="tenth">
									<queryMNF></queryMNF>
								</el-tab-pane>
								<!-- 工资 -->
								<!--<el-tab-pane label="员工工资" name="eleventh">
									<queryYGGZ></queryYGGZ>
								</el-tab-pane>-->
								<!-- 退费 -->
								<el-tab-pane label="学员退费" name="Twelfth">
									<queryXYTF></queryXYTF>
								</el-tab-pane>
							</el-tabs>
						</el-col>
					</el-tab-pane>
					<!-- 报名费-->
					<el-tab-pane name="bmf">
						<span slot="label">
							<span class="select-item-num">{{tjbmf}}</span>
						<span class="select-item-title">学员报名</span>
						</span>
						<bmfTable v-if="activeName == 'bmf'"></bmfTable>
					</el-tab-pane>
					<!-- 加油费 -->
					<el-tab-pane name="jyf">
						<span slot="label">
							<span class="select-item-num">{{tjjyf}}</span>
						<span class="select-item-title">加油加气</span>
						</span>
						<jyfTable v-if="activeName == 'jyf'"></jyfTable>
					</el-tab-pane>
					<!-- 维修保养 -->
					<el-tab-pane name="wxby" class="select-item">
						<span slot="label">
              				<span class="select-item-num">{{tjwxby}}</span>
						<span class="select-item-title">维护维修</span>
						</span>
						<wxbyTable v-if="activeName == 'wxby'"></wxbyTable>
					</el-tab-pane>
					<!-- 车辆保险 -->
					<el-tab-pane name="clbx" class="select-item">
						<span slot="label">
              				<span class="select-item-num">{{tjclbx}}</span>
						<span class="select-item-title">车辆保险</span>
						</span>
						<clbxTable v-if="activeName == 'clbx'"></clbxTable>
					</el-tab-pane>
					<!-- 车辆检车 -->
					<el-tab-pane name="cljc" class="select-item">
						<span slot="label">
              				<span class="select-item-num">{{tjcljc}}</span>
						<span class="select-item-title">车辆检车</span>
						</span>
						<cljcTable v-if="activeName == 'cljc'"></cljcTable>
					</el-tab-pane>
					<!-- 加时缴费 -->
					<el-tab-pane name="jsf" class="select-item">
						<span slot="label">
              				<span class="select-item-num">{{tjjsf}}</span>
						<span class="select-item-title">加时练车</span>
						</span>
						<jsfTable v-if="activeName == 'jsf'"></jsfTable>
					</el-tab-pane>
					<!-- 包库管理 -->
					<el-tab-pane name="bkf" class="select-item">
						<span slot="label">
              				<span class="select-item-num">{{tjbkf}}</span>
						<span class="select-item-title">包库缴费</span>
						</span>
						<bkfTable v-if="activeName == 'bkf'"></bkfTable>
					</el-tab-pane>
					<!-- 保险检车 -->
					<el-tab-pane name="fybx" class="select-item">
						<span slot="label">
              				<span class="select-item-num">{{tjfybx}}</span>
						<span class="select-item-title">报销费用</span>
						</span>
						<fybxTable v-if="activeName == 'fybx'"></fybxTable>
					</el-tab-pane>
					<!-- 保险检车 -->
					<el-tab-pane name="mnf" class="select-item">
						<span slot="label">
              				<span class="select-item-num">{{tjmnf}}</span>
						<span class="select-item-title">考试模拟</span>
						</span>
						<mnfTable v-if="activeName == 'mnf'"></mnfTable>
					</el-tab-pane>
					<!-- 保险检车 -->
					<el-tab-pane name="yggz" class="select-item">
						<span slot="label">
              				<span class="select-item-num">{{tjyggz}}</span>
						<span class="select-item-title">员工工资</span>
						</span>
						<yggzTable v-if="activeName == 'yggz'"></yggzTable>
					</el-tab-pane>
					<!-- 退费-->
					<!--<el-tab-pane name="xytf">
						<span slot="label">
							<span class="select-item-num">{{tjbmf}}</span>
						<span class="select-item-title">学员退费</span>
						</span>
						<xytfTable v-if="activeName == 'xytf'"></xytfTable>
					</el-tab-pane>-->
				</el-tabs>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import queryXYTF from "@/components/zhcx/query-xytf";
	import xytfTable from "@/components/zhcx/xytf-table";

	import queryBMF from "@/components/zhcx/query-bmf";
	import bmfTable from "@/components/zhcx/bmf-table";

	import queryJYF from "@/components/zhcx/query-jyf";
	import jyfTable from "@/components/zhcx/jyf-table";
	
	import queryWXBY from "@/components/zhcx/query-wxby";
	import wxbyTable from "@/components/zhcx/wxby-table";
	
	import queryCLBX from "@/components/zhcx/query-clbx"
	import clbxTable from "@/components/zhcx/clbx-table";
	
	import queryCLJC from "@/components/zhcx/query-cljc"
	import cljcTable from "@/components/zhcx/cljc-table"
	
	import queryJSF from "@/components/zhcx/query-jsf"
	import jsfTable from "@/components/zhcx/jsf-table"
	
	import queryBKF from "@/components/zhcx/query-bkf"
	import bkfTable from "@/components/zhcx/bkf-table"
	
	import queryFYBX from "@/components/zhcx/query-fybx"
	import fybxTable from "@/components/zhcx/fybx-table"
	
	import queryMNF from "@/components/zhcx/query-ksmnf"
	import mnfTable from "@/components/zhcx/mnf-table"
	
	import queryYGGZ from "@/components/zhcx/query-yggz"
	import yggzTable from "@/components/zhcx/yggz-table"
	
	export default {
		name: "selectall",
		components: {
			queryBMF,
			bmfTable,
			queryJYF,
			jyfTable,
			queryWXBY,
			wxbyTable,
			queryCLBX,
			clbxTable,
			queryCLJC,
			cljcTable,
			queryJSF,
			jsfTable,
			queryBKF,
			bkfTable,
			queryFYBX,
			fybxTable,
			queryMNF,
			mnfTable,
			queryYGGZ,
			yggzTable,
			queryXYTF,
			xytfTable
		},
		mounted() {
			//获取收支大数据统计
			this.$http.get("main/index/szdsj", d => {
				if(d.resultCode == 0) {
					this.szdsj = d.record;
				}
			});
		},
		data() {
			return {
				activeName: "first",
				activeName2: "first",
				szdsj: {},
			};
		},
		computed: {
			tjbmf() { // 报名费统计
				let _tj = this.szdsj.monthIncome;
				return _tj ? _tj.bmf || 0 : 0;
			},
			tjjyf() { // 加油费统计
				let _tj = this.szdsj.monthOutlay;
				return _tj ? _tj.jyjq || 0 : 0;
			},
			tjwxby() { // 维修保养统计
				let _tj = this.szdsj.monthOutlay;
				return _tj ? _tj.wxby || 0 : 0;
			},
			tjclbx() {
				let _tj = this.szdsj.monthOutlay;
				return _tj ? _tj.clbx || 0 : 0;
			},
			tjcljc() {
				let _tj = this.szdsj.monthOutlay;
				return _tj ? _tj.cljc || 0 : 0;
			},
			tjjsf() {
				let _tj = this.szdsj.monthIncome;
				return _tj ? _tj.jsf || 0 : 0;
			},
			tjbkf() {
				let _tj = this.szdsj.monthIncome;
				return _tj ? _tj.bkf || 0 : 0;
			},
			tjfybx() {
				let _tj = this.szdsj.monthOutlay;
				return _tj ? _tj.fybx || 0 : 0;
			},
			tjmnf() {
				let _tj = this.szdsj.monthIncome;
				return _tj ? _tj.mnf || 0 : 0;
			},
			tjyggz() {
				let _tj = this.szdsj.monthOutlay;
				return _tj ? _tj.yggz+_tj.jlgz || 0 : 0;
			}
		}
	};
</script>

<style scoped>
	.icon-dengpao {
		color: #ff6614;
		margin-right: 6px;
	}
	
	.select-endDate {
		float: right;
		position: relative;
		top: 14px;
		color: #929191;
	}
	
	.select-content {
		margin-top: 20px;
	}
	
	.select-item-title {
		font-size: 15px;
	}
	
	.select-item-num {
		font-family: fontNum2;
		font-size: 22px;
		font-weight: bold;
	}
	
	.selectC-cont-item .el-select {
		width: 100%;
	}
	
	.submit-btn {
		margin: 30px auto;
		display: block;
		cursor: pointer;
	}
	
	.submit {
		padding: 12px 64px !important;
		background: url("../../static/img/jianbian.jpg");
		background-size: 100% 100%;
		height: 40px !important;
		border: 0 !important;
		color: #fff;
		margin: 0 auto;
		display: block !important;
		position: relative;
		top: 50px;
	}
</style>